<template>
    <div class="edit-popup" style="width: 50vw">
        <popup
                ref="popupRef"
                title="订单详情"
                :async="true"
                width="40vw"
                :cancelButtonText="false"
                :confirmButtonText="false"
                @close="handleClose"
        >
            <div class="popup-div">
                <div class="item-div">
                    <div>订单信息</div>
                    <div class="item-div-item"><span>订单编号：</span><span style="color:#2494f2">{{formData?.order?.order_no}}</span></div>
                    <div class="item-div-item"><span>付款方式：</span><span style="color:#2494f2">{{formData?.order?.payment_remark}}</span></div>
                    <div class="item-div-item"><span>买家信息：</span><span style="color:#2494f2">{{formData?.order_user?.nickname}}</span></div>
                    <div class="item-div-item"><span>会员ID：</span><span style="color:#2494f2">{{formData?.order_user?.id}}</span></div>
                    <div class="item-div-item"><span>配送方式：</span><span style="color:#2494f2">{{formData?.order?.user_pick_type_name}}</span></div>
                    <div class="item-div-item"><span>收货人：</span><span style="color:#2494f2">{{formData?.order_send?.address_name}}---{{formData?.order_send?.address_phone}}</span></div>
                    <div class="item-div-item"><span>团长信息：</span><span style="color:#2494f2">{{formData?.order_community_user?.nickname}}</span></div>
                    <div class="item-div-item"><span>取货地址：</span><span style="color:#2494f2">{{formData?.order_send?.address_content}}</span></div>
                </div>
                <div class="item-div">
                    <div>交易信息</div>
                    <div>
                        <div class="item-div-item"><span>订单状态：</span><span style="color:#2494f2">{{formData?.order?.status_name}}</span></div>
                        <div class="item-div-item"><span>交易单号：</span><span style="color:#2494f2">{{formData?.order?.payment_trade}}</span></div>
                        <div class="item-div-item"><span>发货时间：</span><span style="color:#2494f2">{{formData?.order?.send_date_time}}</span></div>
                    </div>
                </div>
            </div>
        </popup>
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import Popup from '@/components/popup/index.vue'
    import feedback from '@/utils/feedback'
    import { orderDetail } from '@/api/eggManage'
    // import { form1, form2 } from "./detailData";
    const emit = defineEmits(['success', 'close'])
    const popupRef = shallowRef<InstanceType<typeof Popup>>()
    const formData = reactive({
        item: {},
        order: {},
        order_community_user: {},
        order_send: {},
        order_user: {},
    });
    const queryParams = reactive({
        order_no: '',
    });

    // 打开弹窗
    const open = () => {
        popupRef.value?.open();
    };

    // 取消弹窗
    const handleClose = () => {
        emit('close', 0)
    };

    const setFormData = (order_no:string) => {
        queryParams.order_no = order_no;
        orderDetail(queryParams).then((res) => {
            for (const key in formData) {
                if (res[key] != null && res[key] != undefined) {
                    formData[key] = res[key]
                }
            }
        });
    };

    defineExpose({
        open,
        setFormData
    });
</script>

<style lang="scss" scoped>
    .popup-div {
        /*border: 1px red solid;*/
        height: 60vh;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        .item-div {
            padding: 10px;
            border: 1px #B6B6B6 solid;
            flex-basis: 48%;
            box-shadow: 2px 2px 2px #B6B6B6;
            display: flex;
            flex-direction: column;
            gap: 10px;
            /*position: sticky;*/
            /*top: 0;*/
            /*z-index: 999;*/
            /*background-color: #ffffff*/
        }

        .item-div > div:first-child {
            font-size: 20px;
            font-weight: 600;
        }
    }
</style>
